<template>
		<view class="location">
			<view class="page">
				<view class="service-list">会员({{smember_data.length}})
				<router-link to='add-members/add-members'>
				  <button class="add-members">新增</button>
				</router-link>
				</view>
				<view class="member-tab">
					<div class="button-con"><button :class="{'active-tab':active_index == 1}" @click="getMember(1)">店铺会员</button></div>
				    <div class="button-con"><button :class="{'active-tab':active_index == 2}" @click="getActivityMember(2)">活动报名</button></div>
				</view>	
				
			</view>
			<view class="store-members" v-show="active_index == 1">
				<view class="content">
						<mSearch :show="false" @search="search($event,0)" radius="5" :placeholder="placeholder" backgroundColor="#ff5a5f" border='1px #999 solid'></mSearch>
				</view>
				<view class="page members" >
					<view class="member-list"  v-for="(fmember, findex) in smember_data">
						<image class="img-avatar" src="../../static/nv.jpg" v-if="!fmember.muSex"></image>
						<image class="img-avatar" src="../../static/nan.jpg" v-else="fmember.muSex"></image>
						<view class="member-details member-details-info">
							<p class="member-name">{{fmember.muNickName}}</p>
							<p class="member-grade">{{fmember.levelName}}</p>
							<p class="member-name">总消费: ￥{{fmember.muTotalExpend}}, 余额: ￥{{fmember.waMoney}}</p>
							<!-- <p class="member-name">余额: ￥{{fmember.muAccount}} ,积分: {{fmember.muPoints}}</p> -->
						</view>	
						<view class="detail-actions member-details">
							<p style="margin-bottom: 5px;"><button class="action-detail" @click="goDetail(fmember.mcId,fmember.muCode)">详情</button></p>
							<p><button class="action-edit" @click="goEdit(fmember.mcId,fmember.muCode)">编辑</button></p>
						</view>
					</view>
					<div class="results" v-show="resultNull">无相关会员信息</div>
				</view>	
			</view>
			
			<view class="activity-mermbers" style="padding-top: 30px;" v-show="active_index == 2">
				<view class="page members">
					<view class="member-list"  v-for="(fmember, findex) in activity_data">
						<image class="img-avatar" :src="fmember.muHeadUrl" style="margin-right: 20px;"></image>
						<view class="member-details member-details-info">
							<p class="member-name">姓名: {{fmember.muNickName}}</p>
							<p class="member-name">手机号码: {{fmember.muMobile}}</p>
							<p><button class="add-store" @click="addToStore(fmember.muNickName,fmember.muMobile)">添加到店铺</button></p>
						</view>	
					</view>
					<div class="results" v-show="resultNull">无活动报名信息</div>
				</view>	
			</view>
	
		    
		</view>	
</template>

<script>
import mSearch from '@/components/mehaotian-search/mehaotian-search.vue';
import jQuery from '@/common/jquery.min.js';
import Vue from 'vue';
 export default {
    components: {
        mSearch
    },
    data() {
        return {
			keyword:"",
			smember_data:[],
			activity_data:[],
			resultNull:false,
            placeholder:'根据会员名，手机号搜索',
			active_index:1
        };
    },
	onLoad:function(){
		this.getMember(1);	
	},
	onShow:function(){
		this.getMember(1);	
	},
    methods: {
		search(val){
			this.getMember(this.active_index,val);
		},
		getMember(index,val=""){
			this.active_index = index;
			uni.showLoading({
				title: '获取信息中'
			});
			uni.request({
				url: uni.getStorageSync('api_url')+'/member/getList?page=1&perPage=200&mcKey='+uni.getStorageSync('shop_id')+'&keyword='+val,
				complete: (result) => {
					uni.hideLoading();
					if(result.data.data.count == 0){
							this.resultNull=true;
					}
					else{
						this.resultNull=false;
					}
					if(result.data.code != 1){
						uni.showToast({
							title:result.data.msg
						});
					}else{
						this.smember_data=result.data.data.data;
						this.smember_data.forEach((member)=>{
							uni.request({
								url: uni.getStorageSync('api_url')+'/agencyLevel/get/'+member.alId+'?acKey='+member.muId,
								complete: (result) => {
									uni.hideLoading();
									if(result.data.code != 1){
										uni.showToast({
											title:result.data.msg
										});
									}else{
											Vue.set(member, 'levelName',result.data.data.alName)
											//this.alName = result.data.data.alName
									}
									
								},
							});
						});
						this.show_result=true;
					}
					
				},
			});
		},
		getActivityMember(index){
			this.active_index = index;
			uni.showLoading({
				title: '获取信息中'
			});
			uni.request({
				 url: uni.getStorageSync('api_url')+'/member/getList?page=1&perPage=200&mcKey='+uni.getStorageSync('shop_id')+'&source=activity',
				  //url: uni.getStorageSync('api_url')+'/member/getList?page=1&perPage=50&mcKey=12&source=activity',
				complete: (result) => {
					uni.hideLoading();
					if(result.data.data.count == 0){
							this.resultNull=true;
					}
					else{
						this.resultNull=false;
					}
					if(result.data.code != 1){
						uni.showToast({
							title:result.data.msg
						});
					}else{
						var mobiles = this.arrayColumn(this.smember_data,'muMobile');
						result.data.data.data.forEach((item)=>{
							if(item.muMobile==""||item.muMobile==null){
							}
							else{
									if(jQuery.inArray(item.muMobile,mobiles) > -1){
									}else{
										this.activity_data.push(item);
									}
							}
						})
						if(this.activity_data.length > 0){
							this.resultNull=false;
						}else{
							this.resultNull=true;
						}
						this.show_result=true;
					}
					
				},
			});
		},
		goDetail(mcKey,userId){
			uni.navigateTo({
				'url': '/pages/members/member-detail?mcKey='+mcKey+'&userId='+userId
			});
		},
		goEdit(mcKey,userId){
			uni.navigateTo({
				'url': '/pages/members/member-edit?mcKey='+mcKey+'&userId='+userId
			});
		},
		addToStore(muNickName,muMobile){
			uni.navigateTo({
				'url': '/pages/members/add-members/add-activity-members?muNickName='+muNickName+'&muMobile='+muMobile+'&shop_id='+uni.getStorageSync('shop_id'),
			});
		},
		 arrayColumn(array, columnName) {
		    return array.map(function(value,index) {
		        return value[columnName];
		    })
		}
    }
 };
</script>

<style scoped>
	.page.members{
		    width: 96%;
		    margin: 0 auto;
	}
	.marketing-consultant span{
		    background: linear-gradient(to right bottom,#ffffff,#b582b5,#c8ccc1,#9c87bf,#ffffff);
		    font-size: 0.8rem;
		    color: #FFFFFF;
		    padding: 5px;
	}
	.member-grade{
		font-size: 0.8rem;
		background: radial-gradient(#ec4fae, transparent);
		line-height: 0.8rem;
		display: inline-block;
	}
	.member-name{
		font-size: 0.8rem;
		letter-spacing: -1px;
	}
	.member-details{
		flex-grow: 1;
	}
	.img-avatar{
		width: 3rem;
		height: 3rem;
		border-radius: 50%;
		margin-left: 0.5rem;
	}
	.add-members{
		       position: absolute;
		       right: 10px;
		       top: 5px;
		       font-size: 12px;
		       background: linear-gradient(to right bottom,#fb4386,#ec4fae,#ce63d0,#a377ea,#6488f9);
		       color: #ffffff;
	}

	.member-list{
		margin: 1.5rem 0;
		    border: 1px solid #6d1c79;
		    box-sizing: border-box;
			display: flex;
			padding: 20px 10px;
	}

    .location{
		width: 100%;
		background-color: #ffffff;
	}
	.location .search .content .content-box .icon{
		color:#6d1c79;
	}
	.uni-input-placeholder{
		font-size: 14px;
	}
	.search.button{
		font-size: 14px;
	}
	.results{
		text-align: center;
		color: red;
		font-size: 16px;
		margin: 20px auto;
	}
	.detail-actions uni-button {
	    font-size: 12px;
		background: rgb(109, 28, 121);
	    color: #ffffff;	
		width: 55px;
	}
	.activity-mermbers uni-button {
	    font-size: 12px;
		background: rgb(109, 28, 121);
	    color: #ffffff;	
		width: 105px;
		    margin-top: 10px;
		    margin-left: 0px;
	}
	.member-details-info {
		width: 50%;
		margin-left: 20px;
	}
	.member-tab .button-con {
		float:left;
		width: 50%;
	}
	.member-tab .button-con uni-button{
		width: 100px;
		height: 35px;
		font-size: 12px;
		line-height: 35px;
	}
	.member-tab .button-con .active-tab {
		background: -webkit-gradient(linear,left top, right bottom,from(#fb4386),color-stop(#ec4fae),color-stop(#ce63d0),color-stop(#a377ea),to(#6488f9));
		background: -o-linear-gradient(left top,#fb4386,#ec4fae,#ce63d0,#a377ea,#6488f9);
		background: linear-gradient(to right bottom,#fb4386,#ec4fae,#ce63d0,#a377ea,#6488f9);
		color: #ffffff;
	}
</style>
